<template>
	<view>
		<view v-if="isShow">
			<view class="content">
				<image class="close-button" @tap="closePage" src="../../static/images/ic_login_nav_close.png"></image>
				<image src="https://file.huishouka.com.cn/static/ic_company_bg.png" mode="widthFix"
					style="width: 100vw;" @click="clickImg"></image>
			</view>

			<!-- <u-popup :show="showPopup" @close="closePop()" round="20">
				<view class="popup-container">
					<view class="popup-header">
						<view style="color: #323233; font-size: 32rpx;">请选择惠收卡客服</view>
						<view style="color: #969799; font-size: 28rpx; margin-top: 16rpx;">上班时间：周一至周日 09:00~23:50</view>
					</view>
					<view class="popup-conten">
						<view class="popup-item" v-for="(item,index) in serviceList" :key="index"
							@click="handleService(item.type)">
							<image :src="item.url" mode="heightFix"></image>
							<view style="margin-left: 18rpx;">{{item.label}}</view>
						</view>
					</view>
					<view class="popup-cancel" @click="closePop">取消</view>
				</view>
			</u-popup> -->
			<service-popup :show="showPopup" @update:show="handleShowUpdate"></service-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false,
				statusBarHeight: 20,
				appConfig: null,
				serviceList: [{
						type: 'qq',
						label: 'QQ在线客服',
						icon: 'qq-fill',
						color: '#12B7F5',
						url: '../../static/images/ic_customer_qq.png'
					},
					{
						type: 'wechat',
						label: '微信在线客服',
						icon: 'weixin-fill',
						color: '#09BB07',
						url: '../../static/images/ic_customer_wx.png'
					},
					{
						type: 'tel',
						label: '电话咨询客服',
						icon: 'phone-fill',
						color: '#2979FF',
						url: '../../static/images/ic_customer_phone.png'
					}
				],
				isShow: uni.getStorageSync("isShow"),
			};
		},
		created() {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			//获取状态栏高度
			this.statusBarHeight = systemInfo.statusBarHeight

			// 微信小程序适配
			// #ifdef MP-WEIXIN
			const menuRect = uni.getMenuButtonBoundingClientRect()
			this.rightSafeArea = systemInfo.windowWidth - menuRect.left // 计算右侧避让距离
			// #endif
		},
		async onLoad() {
			this.appConfig = await this.$app.getAppConfit();
		},
		methods: {
			// 响应子组件事件，更新状态
			handleShowUpdate(newValue) {
				this.showPopup = newValue;
			},
			clickImg() {
				this.showPopup = true;
			},
			closePage() {
				// 关闭页面逻辑
				uni.navigateBack();
			},
			closePop() {
				this.showPopup = false
			},
			handleService(type) {
				console.log(this.appConfig)
				switch (type) {
					case 'qq':
						// 复制qq号
						this.$app.toCopy(this.appConfig.qq)
						break
					case 'wechat':
						// #ifdef MP-WEIXIN
						// 调用企业微信客服聊天
						wx.openCustomerServiceChat({
							extInfo: {
								url: 'https://work.weixin.qq.com/kfid/kfc23a563ee7443bea4'
							},
							corpId: 'ww7362e6d2fe8ba240',
							success: function(response) {
								console.log("客服聊天成功", response);
							},
							fail: function(error) {
								console.log("客服聊天失败", error);
							}
						});
						// #endif
						// #ifdef APP-PLUS
						this.$app.openUrl("https://work.weixin.qq.com/kfid/kfc23a563ee7443bea4", true)
						// #endif
						// #ifdef H5
						this.$app.toCopy("13143488558")
						// #endif
						break
					case 'tel':
						// 拨打客服电话
						// uni.makePhoneCall({
						// 	phoneNumber: this.appConfig.phone
						// })
						this.$app.toCopy(this.appConfig.phone)
						break
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		position: relative;
	}

	.close-button {
		position: absolute;
		z-index: 100;
		width: 68rpx;
		height: 68rpx;
		left: 32rpx;
		top: 80rpx;
	}

	.popup-container {
		padding: 40rpx 0;
	}

	.popup-header {
		text-align: center;
	}

	.popup-conten {
		margin-top: 40rpx;
	}

	.popup-item {
		padding: 28rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #323233;

		image {
			height: 36rpx;
		}
	}

	.popup-cancel {
		padding: 28rpx;
		display: flex;
		justify-content: center;
		color: #646566;
		font-size: 32rpx;
	}
</style>